{% extends 'eval/base.html' %}
{% load staticfiles %}
{% block link_script%}
<link rel="stylesheet" href="{% static 'css/sign.css' %}" media="screen" title="no title" charset="utf-8">
{% endblock%}
{% block base_body %}
    <div class="ui fluid image" id="img">
        <div class="ui form" id="biao">
            <div class="denglu">注册</div>
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="inline field" id="zhanghao">
                <label id="four_01">账号</label>
                <input type="text" name="user" placeholder="请输入手机号" class="phone" maxlength="11" style="color:#999;"
                       onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error1"></span>
            </div>
            <div class="inline field" id="name">
                <label id="four_02">姓名</label>
                <input type="text" placeholder="请输入真实姓名">
            </div>
            <div class="inline field" id="pwd">
                <label id="four_03">密码</label>
                <input type="password" class="password" placeholder="请输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span>
            </div>
            <div class="inline field" id="pwd_02">
                <label id="four_04">确认密码</label>
                <input type="password"  class = "email" placeholder="请再次输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error_01 error4"></span>
            </div>
            <div class="ui right aligned container">
                <p id="zhuce">已有账号，去 <a href="#">登陆</a></p>
            </div>
            <button class="large ui button" id="login">注册</button>
        </div>
    </div>

<form method="post">
    {{ form }}
    {% csrf_token %}
    <button class="large ui button" id="login">注册</button>
</form>
{% endblock %}
{% block base_foot %}{% endblock %}
<script>

    function textFocus(el) {
        if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
    }
    function textBlur(el) {
        if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
    }

    $(function(){
        //手机号栏失去焦点
        $(".phone").blur(function(){
            reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)

            if( $(this).val()==""|| $(this).val()=="请输入您的手机号")
            {
                $(this).attr('placeholder','请输入您的手机号');
            }
            else if($(this).val().length<11)
            {
                $(this).attr('placeholder','请输入的长度有误');
            }
            else
            {
                $(this).addClass("checkedN");
                $(this).removeClass("errorC");
                $(this).next().empty();
            }
        });

        //密码栏失去焦点
        $(".password").blur(function(){
            reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
            if(!reg.test($(".password").val()))
            {
                $(this).attr('placeholder','请输入6~12位的数字、字母或特殊字符！');
            }
            else
            {
                $(this).removeClass("errorC");
                $(".error3").empty();
                $(this).addClass("checkedN");
            }
        });

        /*确认密码失去焦点*/
        $(" .email").blur(function(){
            var pwd1=$('input.password').val();
            var pwd2=$(this).val();
            if(($(this).val() == '请再次输入密码' || $(this).val() == "") && (pwd1 == "请输入密码" || pwd1 == "") ){
                return;
            }else if(pwd1!=pwd2)
            {
//                $(this).addClass("errorC");
//                $(this).removeClass("checkedN");
//                $(this).next().html("两次密码输入不一致！");
//                $(this).next().css("display","block");
                  $(this).attr('placeholder','两次密码输入不一致!');
            }
            else
            {
                $(this).removeClass("errorC");
                $(this).next().empty();
                $(this).addClass("checkedN");
            }
        });

    })
</script>
